<template>
  <div id="app">
    <!-- <router-link to="/home"
                 tag="button"
                 replace
                 active-class="active">首页</router-link>
    <router-link to="/about"
                 tag="button"
                 replace
                 active-class="active">关于</router-link> -->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-link :to="'/user/' + userId"
                 tag="button">用户</router-link>
    <router-link :to="{path:'/profile',query:{name:'cyj',age:18,height:1.88}}"
                 tag="button">档案</router-link>

    <button @click="userClick">用户2</button>
    <button @click="profileClick">档案2</button>

    <keep-alive exclude="About">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'lisi'
    }
  },
  methods: {
    homeClick() {
      // 通过代码的方式修改路由,vue-router
      // 也有replace => replaceState
      // push => pushState
      this.$router.push('/home')
      // console.log('home');
    },
    aboutClick() {
      this.$router.push('/about')
      // console.log('about');
    },
    userClick() {
      this.$router.push({ path: '/user/' + this.userId })
    },
    profileClick() {
      this.$router.push({ path: '/profile', query: { name: 'joo', age: 10, height: 1.77 } })
    }
  }
}
</script>

<style>
.router-link-active {
  color: red;
}

.active {
  color: red;
}
</style>
